import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input, Tooltip } from 'antd';
import React, {useState} from 'react';


const App = () => {
  const [form] = Form.useForm()
  const [skuList, setSkuList] = useState([])
  // const [showSkuAdd, setShowSkuAdd] = useState()
  const onFinish = (values) => {
    setSkuList(values.skuList)
  };

  const addSkuDetail = ()=>{
    console.log('添加具体的值');
  }
  
  const skuDetailAdd = (index)=>{
    let skuDetail = form.getFieldValue('skuDetail'+index)
    console.log(skuDetail);
  }

  return (
    <Form name="dynamic_form_item" onFinish={onFinish} form={form}>
      <Form.List
        name="skuList"
      >
        {(fields, { add, remove }, { errors }) => (
          <>
            {fields.map((field) => (
              <Form.Item
                label='请输入规格名称'
                required={false}
                key={field.key}
              >
                <Form.Item
                  {...field}
                  validateTrigger={['onChange', 'onBlur']}
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: "请输入规格名称，或者删除这个控件",
                    },
                  ]}
                  noStyle
                >
                  <Input
                    placeholder="规格名称"
                    style={{
                      width: '60%',
                    }}
                  />
                </Form.Item>
                {fields.length > 1 ? (
                  <MinusCircleOutlined
                    onClick={() => remove(field.name)}
                  />
                ) : null}
              </Form.Item>
            ))}
            <Form.Item>
              <Button
                type="dashed"
                onClick={() => add()}
                style={{
                  width: '60%',
                }}
                icon={<PlusOutlined />}
              >
                添加规格控件
              </Button>
            
              <Form.ErrorList errors={errors} />
            </Form.Item>
            {
              skuList.length>0 && (
                <Form.Item label="已添加的规格">
                  {
                    skuList.map((item,index) => {
                      return (
                        <span onClick={addSkuDetail} type="primary" key={index} className="ml15">{item}</span>
                      )
                    })
                  }
              </Form.Item>
              )
            }
            
          </>
        )}
      </Form.List>

      {
        skuList.map((item,index)=>{
          return (
            <div key={index}>
              <Form.Item label={`添加${item}具体值：`}>
               <Form.List name={'skuDetail'+index}>
              {(fields, { add, remove }, { errors }) => (
                  <>
                    {fields.map((field,index) => (
                      <Form.Item
                        label={'规格'+(index+1)}
                        required={false}
                        key={field.key}
                      >
                        <Form.Item
                          {...field}
                          validateTrigger={['onChange', 'onBlur']}
                          rules={[
                            {
                              required: true,
                              whitespace: true,
                              message: "请输入具体规格值，或者删除这个控件",
                            },
                          ]}
                          noStyle
                        >
                          <Input
                            placeholder="规格值"
                            style={{
                              width: '30%',
                            }}
                          />
                        </Form.Item>
                        {fields.length > 1 ? (
                          <MinusCircleOutlined
                            onClick={() => remove(field.name)}
                          />
                        ) : null}
                      </Form.Item>
                    ))}
                    <Form.Item>
                      <Button
                        type="dashed"
                        onClick={() => add()}
                        style={{
                          width: '30%',
                        }}
                        icon={<PlusOutlined />}
                      >
                        添加{item}规格值
                      </Button>
                    
                      <Form.ErrorList errors={errors} />
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType='button' onClick={()=>{skuDetailAdd(index)}}>{item}规格确定</Button>
                    </Form.Item>
                  </>
                )}
              </Form.List>
            </Form.Item>
            </div>
            
          )
          
        })
      }
      
      <Form.Item>
        <Button type="primary" htmlType="submit">
          添加规格
        </Button>
      </Form.Item>

    </Form>
  );
};

export default App;


// import {  Form, Input } from 'antd';
// import React from 'react';


// const App = () => {

//   // 表单验证通过的函数
//   const onFinish = (values) => {
//     console.log(values);
//   };

//   /**
//    * Form.List 中是一个函数（渲染）
//    *  函数有一些参数，参数一就是控件列表，参数二是添加和删除方法
//    * 函数要返回 html的内容  返回值就是渲染的内容
//    */
//   return (
//     <Form onFinish={onFinish}>
//       <Form.List name="list">
//         {
//           (fields, {add})=>{
//             return <div>
//               {
//                 fields.map((item) => {
//                   return (
//                     <Form.Item  label="请输入规格名称" {...item}>
//                       <Input placeholder='请输入规格名称'></Input>
//                     </Form.Item>
//                   )
//                 }) 
//               }
//               <button type="button" onClick={add}>添加</button>
//               <button>获取数据</button>
//             </div>
            
//           }
//         }
//       </Form.List>
//     </Form>
//   )

//   /**
//    * <Form.List name="skuDetail">
//                       {
//                         (skuValues, {skuAdd})=>{
//                           return (
//                            <div>
//                             {
//                               skuValues.map(item => {
//                                 return (
//                                 <Form.Item key={item.key} label="请输入具体规格值">
//                                   <Input placeholder='添加规格值'></Input>
                                 
//                                 </Form.Item>
//                               )
//                               })
//                             }
//                              <button onClick={skuAdd}>+</button>
//                            </div>
//                           )
//                         }
//                       }
//                     </Form.List>
//    */

//   // return (
//   //   <Form name="dynamic_form_item" layout="vertical" onFinish={onFinish}>
//   //     <Form.List
//   //       name="names"
        
//   //     >
//   //       {(fields, { add, remove }) => (
//   //         <>
//   //         {console.log(fields)}
//   //         {/* 即将产生好多个Form.Item */}
//   //           {fields.map((field, index) => (
//   //             <Form.Item
//   //               label={index === 0 ? '第一项' : '不是第一个'}
//   //               required={false}
//   //               key={field.key}
//   //             >
//   //               <Form.Item
//   //                 {...field}
//   //               >
//   //                 <Input
//   //                   placeholder="请输入规格名称"
//   //                   style={{
//   //                     width: '60%',
//   //                   }}
//   //                 />
//   //               </Form.Item>
//   //               {fields.length > 1 ? (
//   //                 <MinusCircleOutlined
//   //                   onClick={() => remove(field.name)}
//   //                 />
//   //               ) : null}
//   //             </Form.Item>
//   //           ))}

//   //           {/* 下面的两个按钮 */}
//   //           <Form.Item>
//   //             <Button
//   //               type="dashed"
//   //               onClick={() => add()}
//   //               style={{
//   //                 width: '60%',
//   //               }}
//   //               icon={<PlusOutlined />}
//   //             >
//   //               添加控件
//   //             </Button>
//   //             <Button
//   //               type="dashed"
//   //               onClick={() => {
//   //                 add('The head item', 0);
//   //               }}
//   //               style={{
//   //                 width: '60%',
//   //                 marginTop: '20px',
//   //               }}
//   //               icon={<PlusOutlined />}
//   //             >
//   //               头部添加控件
//   //             </Button>
             
//   //           </Form.Item>
//   //         </>
//   //       )}
//   //     </Form.List>
//   //   </Form>
//   // );
// };

// export default App;



// // import axios from 'axios';  // 数据请求
// // import React from 'react' 
// // import { useQuill } from 'react-quilljs';  // 富文本编辑器的内容
// // import 'quill/dist/quill.snow.css'; // 富文本的样式

// // export default () => {
// //   const { quill, quillRef } = useQuill();  // 富文本编辑器初始化
 
// //   // 插入编辑器
// //   const insertToEditor = (url) => {
// //     const range = quill.getSelection();
// //     console.log(range);
// //     quill.insertEmbed(range.index, 'image', url);
// //   };

// //   // 上传到服务器
// //   const saveToServer = async (file) => {
// //     const body = new FormData();
// //     body.append('file', file);
// //     const res = await axios.post('/api/detailUpload', body);
// //     insertToEditor(res.data.uploadedImageUrl);
// //   };

// //   // Open Dialog to select Image File
// //   const selectLocalImage = () => {
// //     const input = document.createElement('input');
// //     input.setAttribute('type', 'file');
// //     input.setAttribute('accept', 'image/*');
// //     input.click();

// //     input.onchange = () => {
// //       const file = input.files[0];
// //       saveToServer(file);
// //     };
// //   };

// //   React.useEffect(() => {
// //     if (quill) {
// //       quill.getModule('toolbar').addHandler('image', selectLocalImage);
// //     }
// //   }, [quill]);

// //   return (
// //     <div style={{ width: 500, height: 300, border: '1px solid lightgray' }}>
// //       <div ref={quillRef} />
// //     </div>
// //   );
// // };



// // // import React from 'react'
// // // import { useQuill } from 'react-quilljs';
// // // import 'quill/dist/quill.snow.css';

// // // export default function Demo() {
// // //   const { quill, quillRef } = useQuill();
// // //   return (
// // //     <div>
// // //       <div style={{ width: 500, height: 300 }}>
// // //         <div ref={quillRef} />
// // //       </div>
// // //       <button onClick={()=>{console.log(quill.root.innerHTML)}}>获取内容</button>
// // //     </div>
    
// // //   );
// // // }



// // // import { Table } from 'antd';  
// // // import React, { useEffect, useState } from 'react';
// // // import axios from 'axios'

// // // // 表格的列的结构
// // // const columns = [
// // //   {
// // //     title: 'id',
// // //     dataIndex: '_id',
// // //   },
// // //   {
// // //     title: '商品名称',
// // //     dataIndex: 'title',
// // //     sorter: true,
// // //     render: (name) => `${name}`,
// // //   },
// // //   {
// // //     title: '商品价格',
// // //     dataIndex: 'price',
// // //   },
// // //   {
// // //     title: '商品主图',
// // //     dataIndex: 'mainImage',
// // //     render: (text)=>{
// // //       return <img  width='100' src={text} alt='true'/>
// // //     }
// // //   },
// // //   {
// // //     title: '商品描述',
// // //     dataIndex: 'desc',
// // //   }
// // // ];


// // // // 定义了 getRandomuserParams 方法
// // // const getRandomuserParams = (params) => ({
// // //   results: params.pagination?.pageSize,
// // //   page: params.pagination?.current,
// // //   ...params,
// // // });

// // // const App = () => {

// // //   // 定义了 data loading pagination
// // //   const [data, setData] = useState();
// // //   const [loading, setLoading] = useState(false);
// // //   const [pagination, setPagination] = useState({
// // //     current: 1,
// // //     pageSize: 10,
// // //   });

// // //   const [selectedRowKeys, setSelectedRowKeys] = useState([]);

// // //   // 定义了一个函数   fetchData
// // //   // 获取数据设置了分页
// // //   const fetchData = (params = {}) => {
// // //     setLoading(true);
// // //     axios.get('/api/list').then(data => {
// // //       setData(data.data.data)
// // //       setLoading(false);
// // //     })




// // //     // fetch(`https://randomuser.me/api?${qs.stringify(getRandomuserParams(params))}`)
// // //     //   .then((res) => res.json())
// // //     //   .then(({ results }) => {
// // //     //     setData(results);
// // //     //     setLoading(false);
// // //     //     setPagination({
// // //     //       ...params.pagination,
// // //     //       total: 200, // 200 is mock data, you should read it from server
// // //     //       // total: data.totalCount,
// // //     //     });
// // //     //   });
// // //   };


// // //   // 一进入界面  调用  fetchData 函数
// // //   useEffect(() => {
// // //     fetchData({
// // //       pagination,
// // //     });
// // //   }, []);


// // //   // 定义了一个函数  handleTableChange
// // //   const handleTableChange = (newPagination, filters, sorter) => {
// // //     fetchData({
// // //       sortField: sorter.field,
// // //       sortOrder: sorter.order,
// // //       pagination: newPagination,
// // //       ...filters,
// // //     });
// // //   };


// // //   const onSelectChange = (newSelectedRowKeys) => {
// // //     console.log('selectedRowKeys changed: ', selectedRowKeys);
// // //     setSelectedRowKeys(newSelectedRowKeys);
// // //   };

// // //   const rowSelection = {
// // //     selectedRowKeys,
// // //     onChange: onSelectChange,
// // //   };

// // //   return (
// // //     <Table
// // //       columns={columns}
// // //       rowSelection={rowSelection}
// // //       rowKey={(record) => record._id}
// // //       dataSource={data}
// // //       pagination={pagination}
// // //       loading={loading}
// // //       onChange={handleTableChange}
// // //     />
// // //   );
// // // };

// // // export default App;














// // // // import { Button, Table } from 'antd';
// // // // import React, { useState } from 'react';
// // // // const columns = [
// // // //   {
// // // //     title: 'Name',
// // // //     dataIndex: 'name',
// // // //   },
// // // //   {
// // // //     title: 'Age',
// // // //     dataIndex: 'age',
// // // //   },
// // // //   {
// // // //     title: 'Address',
// // // //     dataIndex: 'address',
// // // //   },
// // // // ];
// // // // const data = [];

// // // // for (let i = 0; i < 46; i++) {
// // // //   data.push({
// // // //     key: i,
// // // //     name: `Edward King ${i}`,
// // // //     age: 32,
// // // //     address: `London, Park Lane no. ${i}`,
// // // //   });
// // // // }

// // // // const App = () => {
// // // //   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
// // // //   const [loading, setLoading] = useState(false);

// // // //   const start = () => {
// // // //     setLoading(true); // ajax request after empty completing

// // // //     setTimeout(() => {
// // // //       setSelectedRowKeys([]);
// // // //       setLoading(false);
// // // //     }, 1000);
// // // //   };

// // // //   const onSelectChange = (newSelectedRowKeys) => {
// // // //     console.log('selectedRowKeys changed: ', selectedRowKeys);
// // // //     setSelectedRowKeys(newSelectedRowKeys);
// // // //   };

// // // //   const rowSelection = {
// // // //     selectedRowKeys,
// // // //     onChange: onSelectChange,
// // // //   };
// // // //   const hasSelected = selectedRowKeys.length > 0;
// // // //   return (
// // // //     <div>
// // // //       <div
// // // //         style={{
// // // //           marginBottom: 16,
// // // //         }}
// // // //       >
// // // //         <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
// // // //           Reload
// // // //         </Button>
// // // //         <span
// // // //           style={{
// // // //             marginLeft: 8,
// // // //           }}
// // // //         >
// // // //           {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
// // // //         </span>
// // // //       </div>
// // // //       <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
// // // //     </div>
// // // //   );
// // // // };

// // // // export default App;





















// // // // // import { Divider, Radio, Table } from 'antd';
// // // // // import React, { useState } from 'react';
// // // // // const columns = [
// // // // //   {
// // // // //     title: 'Name',
// // // // //     dataIndex: 'name',
// // // // //     render: (text) => <a>{text}</a>,
// // // // //   },
// // // // //   {
// // // // //     title: 'Age',
// // // // //     dataIndex: 'age',
// // // // //   },
// // // // //   {
// // // // //     title: 'Address',
// // // // //     dataIndex: 'address',
// // // // //   },
// // // // // ];
// // // // // const data = [
// // // // //   {
// // // // //     key: '1',
// // // // //     name: 'John Brown',
// // // // //     age: 32,
// // // // //     address: 'New York No. 1 Lake Park',
// // // // //   },
// // // // //   {
// // // // //     key: '2',
// // // // //     name: 'Jim Green',
// // // // //     age: 42,
// // // // //     address: 'London No. 1 Lake Park',
// // // // //   },
// // // // //   {
// // // // //     key: '3',
// // // // //     name: 'Joe Black',
// // // // //     age: 32,
// // // // //     address: 'Sidney No. 1 Lake Park',
// // // // //   },
// // // // //   {
// // // // //     key: '4',
// // // // //     name: 'Disabled User',
// // // // //     age: 99,
// // // // //     address: 'Sidney No. 1 Lake Park',
// // // // //   },
// // // // // ]; // rowSelection object indicates the need for row selection

// // // // // const rowSelection = {
// // // // //   onChange: (selectedRowKeys, selectedRows) => {
// // // // //     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
// // // // //   },
// // // // //   getCheckboxProps: (record) => ({
// // // // //     disabled: record.name === 'Disabled User',
// // // // //     // Column configuration not to be checked
// // // // //     name: record.name,
// // // // //   }),
// // // // // };

// // // // // const App = () => {
// // // // //   const [selectionType, setSelectionType] = useState('checkbox');
// // // // //   return (
// // // // //     <div>
// // // // //       <Radio.Group
// // // // //         onChange={({ target: { value } }) => {
// // // // //           setSelectionType(value);
// // // // //         }}
// // // // //         value={selectionType}
// // // // //       >
// // // // //         <Radio value="checkbox">Checkbox</Radio>
// // // // //         <Radio value="radio">radio</Radio>
// // // // //       </Radio.Group>

// // // // //       <Divider />

// // // // //       <Table
// // // // //         rowSelection={{
// // // // //           type: selectionType,
// // // // //           ...rowSelection,
// // // // //         }}
// // // // //         columns={columns}
// // // // //         dataSource={data}
// // // // //       />
// // // // //     </div>
// // // // //   );
// // // // // };

// // // // // export default App;



// // // // // // import { Space, Table, Tag } from 'antd';
// // // // // // import React from 'react';
// // // // // // const columns = [
// // // // // //   {
// // // // // //     title: 'Name',
// // // // // //     dataIndex: 'name',
// // // // // //     key: 'name',
// // // // // //     render: (text) => <a>{text}</a>,
// // // // // //   },
// // // // // //   {
// // // // // //     title: 'Age',
// // // // // //     dataIndex: 'age',
// // // // // //     key: 'age',
// // // // // //   },
// // // // // //   {
// // // // // //     title: 'Address',
// // // // // //     dataIndex: 'address',
// // // // // //     key: 'address',
// // // // // //   },
// // // // // //   {
// // // // // //     title: 'Tags',
// // // // // //     key: 'tags',
// // // // // //     dataIndex: 'tags',
// // // // // //     render: (_, { tags }) => (
// // // // // //       <>
// // // // // //         {tags.map((tag) => {
// // // // // //           let color = tag.length > 5 ? 'geekblue' : 'green';

// // // // // //           if (tag === 'loser') {
// // // // // //             color = 'volcano';
// // // // // //           }

// // // // // //           return (
// // // // // //             <Tag color={color} key={tag}>
// // // // // //               {tag.toUpperCase()}
// // // // // //             </Tag>
// // // // // //           );
// // // // // //         })}
// // // // // //       </>
// // // // // //     ),
// // // // // //   },
// // // // // //   {
// // // // // //     title: 'Action',
// // // // // //     key: 'action',
// // // // // //     render: (_, record) => (
// // // // // //       <Space size="middle">
// // // // // //         <a>Invite {record.name}</a>
// // // // // //         <a>Delete</a>
// // // // // //       </Space>
// // // // // //     ),
// // // // // //   },
// // // // // // ];
// // // // // // const data = [
// // // // // //   {
// // // // // //     key: '1',
// // // // // //     name: 'John Brown',
// // // // // //     age: 32,
// // // // // //     address: 'New York No. 1 Lake Park',
// // // // // //     tags: ['nice', 'developer'],
// // // // // //   },
// // // // // //   {
// // // // // //     key: '2',
// // // // // //     name: 'Jim Green',
// // // // // //     age: 42,
// // // // // //     address: 'London No. 1 Lake Park',
// // // // // //     tags: ['loser'],
// // // // // //   },
// // // // // //   {
// // // // // //     key: '3',
// // // // // //     name: 'Joe Black',
// // // // // //     age: 32,
// // // // // //     address: 'Sidney No. 1 Lake Park',
// // // // // //     tags: ['cool', 'teacher'],
// // // // // //   },
// // // // // // ];

// // // // // // const App = () => <Table columns={columns} dataSource={data} />;

// // // // // // export default App;



























// // // // // // // import React, {useState, createContext, useContext} from 'react'
// // // // // // // const Context = createContext() 
// // // // // // // function HomeLeft() {
// // // // // // //   const x = useContext(Context)
// // // // // // //   return  (<div>
// // // // // // //     homeLeft---数据所在地--{x.data}
// // // // // // //   </div>);
// // // // // // // }

// // // // // // // function Setting() {
// // // // // // //   const x = useContext(Context)
// // // // // // //   return  (<div>
// // // // // // //     Setting -修改的地方-<button onClick={()=>{x.setData(1111)}}>修改</button>
// // // // // // //   </div>);
// // // // // // // }
// // // // // // // function HomeRight() {
// // // // // // //   return  (<div>
// // // // // // //     <Setting></Setting>
// // // // // // //   </div>);
// // // // // // // }

// // // // // // // function Home() {
// // // // // // //   const [data,setData] = useState(0)
// // // // // // //   return (
// // // // // // //     <div>
// // // // // // //       <Context.Provider value={{
// // // // // // //         data,
// // // // // // //         setData
// // // // // // //       }}>
// // // // // // //         <HomeLeft></HomeLeft>
// // // // // // //         <HomeRight></HomeRight>
// // // // // // //       </Context.Provider>
      
// // // // // // //     </div>
// // // // // // //   )
// // // // // // // }


// // // // // // // export default Home

























// // // // // // // // import React, {useState} from 'react'
// // // // // // // // function HomeLeft(props) {
// // // // // // // //   return  (<div>
// // // // // // // //     homeLeft---数据所在地--{props.data}
// // // // // // // //   </div>);
// // // // // // // // }

// // // // // // // // function Setting(props) {
// // // // // // // //   return  (<div>
// // // // // // // //     Setting -修改的地方-<button onClick={()=>{props.setData(1)}}>修改</button>
// // // // // // // //   </div>);
// // // // // // // // }
// // // // // // // // function HomeRight(props) {
// // // // // // // //   return  (<div>
// // // // // // // //     <Setting setData={props.setData}></Setting>
// // // // // // // //   </div>);
// // // // // // // // }

// // // // // // // // function Home() {
// // // // // // // //   const [data,setData] = useState(0)
// // // // // // // //   return (
// // // // // // // //     <div>
// // // // // // // //       <HomeLeft data={data}></HomeLeft>
// // // // // // // //       <HomeRight setData={setData}></HomeRight>
// // // // // // // //     </div>
// // // // // // // //   )
// // // // // // // // }


// // // // // // // // export default Home